<template>
    <div class="role">
        <el-row :gutter="20">
            <el-col :span="6">
                <!-- 角色列表 -->
                <el-card class="role-left">
                    <!-- 列表的一行 -->
                    <div
                        :class="{
                            'role-left-item': true,
                            active: currentRoleId === role.id,
                        }"
                        v-for="role in roleList"
                        :key="role.id"
                        @click="handleSelectRole(role.id)"
                    >
                        <!-- 左边 -->
                        <div>
                            <i class="el-icon-user"></i>
                            <span>{{ role.name }}</span>
                        </div>

                        <!-- 右边 -->
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <i class="iconfont icongengduo"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <i class="el-icon-edit"> </i
                                    >修改角色信息</el-dropdown-item
                                >
                                <el-dropdown-item
                                    ><i class="el-icon-delete"> </i
                                    >删除</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!-- 添加角色按钮 -->
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        circle
                        @click="addRoleDialogVisible = true"
                    ></el-button>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="role-right">
                    <el-row>
                        <span>管理员</span>
                    </el-row>
                    <el-row
                        type="flex"
                        justify="space-between"
                        style="margin-top: 15px"
                    >
                        <el-col :span="8">
                            <el-input
                                placeholder="搜索员工名"
                                v-model="search"
                                size="small"
                            >
                                <el-button
                                    slot="append"
                                    icon="el-icon-search"
                                ></el-button>
                            </el-input>
                        </el-col>

                        <el-col :span="6">
                            <el-button size="small" @click="handleAddUser"
                                >添加员工</el-button
                            >
                            <el-button size="small">移除员工</el-button>
                        </el-col>
                    </el-row>

                    <el-table :data="userList" style="margin-top: 15px">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column
                            label="手机号"
                            prop="mobile"
                        ></el-table-column>

                        <el-table-column
                            label="昵称"
                            prop="nickname"
                        ></el-table-column>

                        <el-table-column label="邮箱">
                            <template slot-scope="scope">
                                {{ scope.row.email || "未填写" }}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <i
                                    class="el-icon-edit"
                                    @click="handleEditUser(scope.row)"
                                ></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <!-- 添加角色弹框 -->
        <el-dialog
            title="新增角色"
            :visible.sync="addRoleDialogVisible"
            width="40%"
        >
            <el-form
                :model="addRoleForm"
                ref="addRoleFormRef"
                :rules="addRoleFormRule"
                size="small"
            >
                <el-form-item label="角色" prop="name">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="addRoleDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="addRole">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    created() {
        this.getRoleList();
    },
    data() {
        return {
            roleList: [],
            userList: [],
            currentRoleId: 1,
            search: "",
            addRoleDialogVisible: false,
            addRoleForm: {
                name: "",
            },
            addRoleFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        async getRoleList() {
            const res = await this.$http.get("/roles");
            this.roleList = res.data;
            console.log("this.roleList ", this.roleList);
        },
        async getUserList() {
            const res = await this.$http.get("/users", {
                params: { rid: this.currentRoleId },
            });
            this.userList = res.data;
            console.log("this.userList", this.userList);
        },
        handleSelectRole(rid) {
            this.currentRoleId = rid;
            this.getUserList();
        },
        handleEditUser(user) {
            console.log("user", user);
        },
        handleAddUser() {},
        addRole() {
            // console.log(this.addRoleForm);
            this.$refs.addRoleFormRef.validate(async (isOk) => {
                if (isOk) {
                    const res = await this.$http.post(
                        "/roles",
                        this.addRoleForm
                    );
                }
            });
        },
    },
};
</script>

<style lang="less">
.role {
    height: 100%;

    .el-row,
    .el-col,
    .el-card {
        height: 100%;
    }

    &-left {
        padding: 0 15px;
        position: relative;

        &-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 10px;
            border-radius: 5px;
            margin-bottom: 10px;

            i {
                margin-right: 15px;
            }
        }

        .active {
            background-color: #ddebfd;
            color: #409eff;
        }

        .el-button {
            position: absolute;
            left: 25px;
            bottom: 25px;
        }
    }

    &-right {
    }
}
</style>
